<template>
  <div class="user-info-container">
    <div class="user-info-card">
      <div class="card-header">
        <h2>个人信息</h2>
      </div>
      <div class="user-avatar">
        <!-- <img
          :src="userInfo.avatar || 'https://picsum.photos/200/200'"
          alt="用户头像"
          class="avatar-img"
        /> -->
        <img
          v-if="userInfo.avatar"
          :src="userInfo.avatar"
          alt="用户头像"
          class="avatar-img"
        />
        <i v-else class="iconfont icon-icon-test13 default-avatar"></i>
      </div>
      <div class="user-details">
        <el-form :model="userInfo" label-width="100px">
          <el-form-item label="账号">
            <span>{{ userInfo.account || "-" }}</span>
          </el-form-item>
          <el-form-item label="昵称">
            <span>{{ userInfo.nickname || "-" }}</span>
          </el-form-item>
          <el-form-item label="性别">
            <span>{{
              userInfo.gender === 1 ? "男" : userInfo.gender === 2 ? "女" : "-"
            }}</span>
          </el-form-item>
          <el-form-item label="年龄">
            <span>{{ userInfo.age || "-" }}</span>
          </el-form-item>
          <el-form-item label="码龄">
            <span>{{ userInfo.codingYears || "-" }}年</span>
          </el-form-item>
          <el-form-item label="地址">
            <span>{{ userInfo.address || "-" }}</span>
          </el-form-item>
          <el-form-item label="邮箱">
            <span>{{ userInfo.email || "-" }}</span>
          </el-form-item>
          <el-form-item label="注册时间">
            <span>{{
              userInfo.createTime ? formatDate(userInfo.createTime) : "-"
            }}</span>
          </el-form-item>
        </el-form>
        <div class="edit-button-container">
          <el-button type="primary" @click="goToEdit" class="edit-button">
            修改信息
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      userInfo: {},
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      const token = localStorage.getItem("token");
      console.log("token:", token);
      if (!token) {
        this.$message.error("请先登录");
        return;
      }

      this.$axios
        .get("user/info", { headers: { Authorization: token } })
        .then((res) => {
          if (res.data.code === 200) {
            if(res.data.data.avatar){
              res.data.data.avatar = "data:image/jpeg;base64," + res.data.data.avatar;
            }
            this.userInfo = res.data.data;
            console.log("userInfo", res.data.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取用户信息失败，请稍后重试");
        });
    },

    formatDate(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleDateString();
    },
    goToEdit() {
      this.$router.push("/user/update");
    },
  },
};
</script>

<style scoped>
.user-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 180px);
  padding: 20px;
}

.user-info-card {
  background-color: white;
  border-radius: 20px;
  box-shadow: -10px -10px 20px rgba(255, 255, 255, 0.8),
    10px 10px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 600px;
  position: relative;
}

.card-header {
  margin-bottom: 30px;
  text-align: center;
}

.card-header h2 {
  font-size: 28px;
  color: #303133;
}

.user-avatar {
  text-align: center;
  margin-bottom: 30px;
}

.avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.avatar-img:hover {
  transform: scale(1.05);
}


.default-avatar {
  display: inline-block;
  width: 120px;
  height: 120px;
  line-height: 120px; /* 让图标垂直居中 */
  text-align: center; /* 让图标水平居中 */
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  font-size: 60px; /* 图标大小适配圆圈 */
  color: #909399; /* 图标颜色 */
  background-color: #f0f0f0; /* 可选背景色增强视觉一致性 */
  transition: transform 0.3s;
}

.default-avatar:hover {
  transform: scale(1.05);
}

.user-details {
  margin-top: 20px;
}

.el-form-item__label {
  font-weight: 500;
}

.el-form-item__content span {
  color: #606266;
}

.edit-button-container {
  margin-top: 30px;
  text-align: center;
}

.edit-button {
  border-radius: 20px;
  background-color: #ffb76b;
  border-color: #ffb76b;
  height: 40px;
  transition: all 0.3s;
  padding: 0 30px;
}

.edit-button:hover {
  background-color: #ff9d34;
  border-color: #ff9d34;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(255, 157, 52, 0.2);
}
</style>